import { useState } from "react";
import { connect } from "react-redux";
import React from "react";

function ComponentB({a_say, toA}) {
    const [b_say, set_b_say] = useState('')

    return <div>
        <p>我是组件B</p>
        <div>组件A对我说：{a_say}</div>
        我对组件A说：<input type="text" onChange={(e)=> {set_b_say(e.target.value)}} />
        <button onClick={()=> {toA(b_say)}}>确定</button>
    </div>
}

const mapStateToProps = state => ({a_say: state.info.a_say})
const mapDispatchToProps = dispatch => ({toA: (mes)=> dispatch({type: 'SET', payload: {b_say: mes}})})

// class ComponentB extends React.Component {
//     state = {b_say: ''}
//     // handleToA=()=>{
//     //     this.props.dispatch({ type: 'SET', payload: { b_say: this.state.b_say } })
//     // }

//     render() {
//         return <div>
//             <p>我是组件B</p>
//             <div>组件A对我说：{this.props.a_say}</div>
//             我对组件A说：<input type="text" onChange={(e) => { this.setState({b_say: e.target.value}) }} />
//             <button onClick={() => { this.handleToA(this.state.b_say) }}>确定</button>
//         </div>
//     }
// }

// const mapStateToProps = state => ({a_say: state.info.a_say})
// const mapDispatchToProps = dispatch => ({toA: (mes)=> dispatch({type: 'SET', payload: {b_say: mes}})})

export default connect(mapStateToProps, mapDispatchToProps)(ComponentB)